<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文本排列属性(text align attribute)</title>
  <!-- 
  text-align 是CSS属性，用于控制文本(包括img)在元素内的水平对齐方式。 text-align 属性的总结： 
    1.  text-align: left; ：文本左对齐。 
    2.  text-align: right; ：文本右对齐。 
    3.  text-align: center; ：文本居中对齐。 
    4.  text-align: justify; ：文本两端对齐，行两端对齐。 
    5.  text-align: inherit; ：继承父元素的文本对齐方式。 
    
    通过设置 text-align 属性，可以控制元素内文本的水平对齐方式，使文本在页面中呈现出不同的布局效果。
  -->
  <style>
    .text-align-center, 
    .img-align-center {
      background-color: aquamarine;
      color: black;

      /* text-align */
      text-align: center;
    }

    .img-align-center img {
      width: 200px;
    }

  </style>
</head>
<body>

  <!-- 文本居中 -->
  <div class="text-align-center">
    I am div text align center
  </div>

  <!-- 图片居中 -->
   <div class="img-align-center">
    <img src="../../images/gouwujie01.jpg" alt="" srcset="">
   </div>
  
</body>
</html>